<template>
  <div>
    <el-dialog title="账单信息" :visible.sync="dialogTableVisible">
      <el-form :model="applyForm" ref="applyForm" label-width="30%">
        <el-row>
          <el-col :span="12">
            <el-form-item label="已开金额" prop="hasopenAccount">
              <el-input
                size="mini"
                disabled
                v-model="applyForm.hasopenAccount"
                style="width: 70%"
              />
            </el-form-item>
            <el-form-item label="申请金额" prop="applyaccount">
              <el-input
                disabled
                size="mini"
                v-model="applyForm.applyaccount"
                style="width: 70%"
                clearable
              />
            </el-form-item>
            <el-form-item label="电子/纸质" prop="invoicetype">
              <el-select
                size="mini"
                v-model="applyForm.invoicetype"
                style="width: 70%"
                clearable
              >
                <el-option
                  v-for="(v, i) in crmPapSource"
                  :key="i"
                  :value="parseInt(i)"
                  :label="v"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="未开金额" prop="notopenAccount">
              <el-input
                disabled
                size="mini"
                v-model="applyForm.notopenAccount"
                style="width: 70%"
              />
            </el-form-item>
            <el-form-item label="抬头名称" prop="customerInvoice">
              <el-select
                size="mini"
                v-model="applyForm.customerInvoice"
                style="width: 70%"
                clearable
              >
                <el-option
                  v-for="(v, i) in customerInvoiceSource"
                  :key="i"
                  :label="v"
                  :value="parseInt(i)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请备注" prop="invoiceremark">
              <el-input
                type="textarea"
                v-model="applyForm.invoiceremark"
                style="width: 70%"
                placeholder="请填入客户地址等备注信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-link
      type="primary"
      :underline="false"
      class="text-sm"
      @click="showDialog(data.id, data)"
      >{{ data.applyaccount }}</el-link
    >
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  props: ["data"],
  data() {
    return {
      crmPapSource: {},
      customerInvoiceSource: {},
      applyForm: {
        hasopenAccount: "",
        notopenAccount: "",
        applyaccount: "",
        invoicetype: "",
        customerInvoice: "",
        invoiceremark: "",
      },
      dialogTableVisible: false,
    };
  },
  created() {},
  mounted() {
    this.billTitle = this.data.name + " 申请发票";
    console.log(this.data);
  },
  methods: {
    async showDialog(id, data) {
      //this.dialogTableVisible = true;
      this.applyId = id;
      this.customerId = data.customerId;
      let res = await ajax("applyForInvoice", {
        id: id,
      });
      console.log(res);
      if (res.success) {
        this.dialogTableVisible = true;
        this.crmPapSource = res.crmPapSource;
        this.customerInvoiceSource = res.customerInvoiceSource;
        this.applyForm.customerInvoice = res.defaultCustomerInvoice;
        this.applyForm.applyaccount = res.saleCustomerBill.applyaccount;
        this.applyForm.hasopenAccount = res.saleCustomerBill.hasopenAccount;
        this.applyForm.notopenAccount = res.saleCustomerBill.notopenAccount;
        this.applyForm.invoicetype = res.saleCustomerBill.invoicetype;
        this.applyForm.invoiceremark = res.saleCustomerBill.invoiceremark;
      } else {
        this.$message.error(m(res.message));
      }
    },
  },
};
</script>
<style scoped>
.el-scrollbar {
  display: flex;
  justify-content: space-around;
  margin-right: -15px;
}
div >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  width: 110%;
  height: 100%;
}
</style>
